<template>
	<Page class="bank-list">
		<!--企业开户行-->
		<div class="log-list">
			<div class="log-list-div">
				<van-search
					v-model="searchValue"
					placeholder="请输入银行名称"
					action-text="搜索"
					@input="searchBank"
				/>
			</div>
		</div>
		<div class="bank-body">
			<van-cell
				v-for="(item, index) in showList"
				clickable
				:key="index"
				:title="item.bankName"
				@click="toggle(item)"
			>
				<template #right-icon>
					<van-checkbox :value="item.checked" ref="checkboxes" />
				</template>
			</van-cell>
		</div>

		<!-- 底部的按钮 -->
		<div class="bank-btn">
			<van-button type="default" round class="bank-btn-item" @click="clickCancel">取消</van-button>
			<van-button type="info" round class="bank-btn-item" @click="clickConfirm">确定</van-button>
		</div>
	</Page>
</template>

<script>
	export default {
		name: 'bankList',
		components: {},
		data() {
			return {
				// form表单
				form: {},
				radio: '0',
				searchValue: '',
				selectIds: [],
				showList: [],
			};
		},
		props: {
			bankList: {
				type: Array,
				default: function () {
					return [];
				},
			},
		},
		watch: {
			bankList: {
				handler(newValue, oldValue) {
					this.showList = newValue;
				},
				deep: true,
				immediate: true,
			},
		}, // watch 监控的是 props 和 data，有必要时监控computed
		created() {},
		methods: {
			changeBox() {
				// console.log(this.selectIds, 'selectIds')
			},
			clickCancel() {
				this.$emit('cancel');
			},
			clickConfirm() {
				const selectOne = this.showList.filter((val) => val.checked);
				if (selectOne.length > 0) {
					this.$emit('clickConfirm', {
						bankId: selectOne[0].bankId,
						bankName: selectOne[0].bankName,
					});
				} else {
					this.$toast('请选择银行！');
				}
			},
			submitForm() {
				// if (!this.vali.status) {
				// 	utils.ui.confirm('提交成功');
				// }
			},
			searchBank() {
				this.showList = this.bankList.filter(
					(pre) => pre.bankName.indexOf(this.searchValue) !== -1
				);
			},
			toggle(item) {
				console.log(item, 'item');
				const hasSelectList = this.bankList.filter((pre) => pre.bankId !== item.bankId);
				hasSelectList.forEach((val) => (val.checked = false));
				item.checked = !item.checked;
				this.$forceUpdate();
			},
			clearValue() {
				this.searchValue = '';
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/assets/css/demo/index.scss';
	.bank-list {
		border-top: 1px solid rgba(255, 255, 255, 0);
		position: fixed;
		left: 0;
		top: 0;
		background: #ffffff;
		z-index: $zIndex-popup;
		overflow-y: auto;
		// border: 1px solid red;
		height: 100vh;
		padding-bottom: 90px;
	}
	.bank-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		// border: 1px solid red;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #ffffff;
		// box-shadow: 0 0 0 1px rgba(131, 128, 128, 0.3);
		.bank-btn-item {
			width: 30%;
		}
	}
</style>
